<template>
  <div>
    <div id="EchartsPie" class="echartsPie" v-show="echartsPieShows"></div>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "EchartsPie",
  data() {
    return {
      echartsPieShows: true,
    };
  },
  mounted() {
    this.getPie();
  },
  methods: {
    getPie() {
      var myChart = echarts.init(document.getElementById("EchartsPie"));
      let option = {
        title: {
          text: "20%",
          textStyle: {
            color: "#111",
            fontSize: 35,
          },
          itemGap: 20,
          left: "center",
          top: "38%",
        },
        angleAxis: {
          max: 100,
          clockwise: true, // 逆时针
          // 隐藏刻度线
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        polar: {
          radius: "180%", //图形大小
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["60%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 200 },
              { value: 1000 },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style>
.echartsPie {
  width: 100%;
  height: 165.5px;
  display: inline-block !important;
}
</style>
